<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../resources/css/calling/component/custom-dialog-form.css">
    <title>新建咨询</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
        }
    </style>
</head>
<body>
    <!-- 触发按钮示例 -->
    <div style="padding: 20px; text-align: center;">
        <button onclick="openConsultationModal()" style="padding: 8px 16px; background: #409eff; color: white; border: 1px solid #409eff; border-radius: 4px; font-size: 14px; cursor: pointer; transition: all 0.1s;" onmouseover="this.style.background='#66b1ff'; this.style.borderColor='#66b1ff'" onmouseout="this.style.background='#409eff'; this.style.borderColor='#409eff'">新建咨询</button>
    </div>

    <!-- 弹窗遮罩层 -->
    <div class="modal-overlay" id="consultationModal">
        <div class="consultation-container">
            <div class="consultation-header">
                <h1>新建咨询</h1>
                <button class="modal-close" onclick="closeConsultationModal()" title="关闭">
                    ×
                </button>
            </div>
            
            <div class="modal-content">
                <form class="consultation-form" id="consultationForm">
            <div class="form-group">
                <label class="form-label">人员姓名<span class="required">*</span>：</label>
                <input type="text" class="form-control" id="personName" name="personName" required placeholder="请输入人员姓名">
            </div>

            <div class="form-group">
                <label class="form-label">联系电话<span class="required">*</span>：</label>
                <input type="tel" class="form-control" id="phoneNumber" name="phoneNumber" required placeholder="请输入联系电话">
            </div>

            <div class="form-group">
                <label class="form-label">咨询类别<span class="required">*</span>：</label>
                <select class="form-control" id="consultationType" name="consultationType" required>
                    <option value="">请选择咨询类别</option>
                    <option value="线下窗口">线下窗口</option>
                    <option value="电话咨询">电话咨询</option>
                    <option value="网上咨询">网上咨询</option>
                    <option value="其他">其他</option>
                </select>
            </div>

            <div class="form-group">
                <label class="form-label">业务分类<span class="required">*</span>：</label>
                <select class="form-control" id="businessCategory" name="businessCategory" required>
                    <option value="">请选择业务分类</option>
                    <option value="人事">人事</option>
                    <option value="财务">财务</option>
                    <option value="教务">教务</option>
                    <option value="学工">学工</option>
                    <option value="科研">科研</option>
                    <option value="资产">资产</option>
                    <option value="其他">其他</option>
                </select>
            </div>

            <div class="form-group">
                <label class="form-label">咨询内容<span class="required">*</span>：</label>
                <textarea class="form-control textarea" id="consultationContent" name="consultationContent" required placeholder="请详细描述您的咨询内容..."></textarea>
            </div>

            <div class="form-actions">
                <button type="button" class="btn btn-cancel" onclick="cancelForm()">取消</button>
                <button type="submit" class="btn btn-save">保存</button>
            </div>
        </form>
            </div>
        </div>
    </div>
    <script src="../resources/js/common.js"></script>
    <script>
        // 表单验证和提交处理
        document.getElementById('consultationForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 获取表单数据
            const formData = {
                personName: document.getElementById('personName').value.trim(),
                phoneNumber: document.getElementById('phoneNumber').value.trim(),
                consultationType: document.getElementById('consultationType').value,
                businessCategory: document.getElementById('businessCategory').value,
                consultationContent: document.getElementById('consultationContent').value.trim()
            };

            // 验证必填字段
            if (!validateForm(formData)) {
                return;
            }

            // 验证电话号码格式
            if (!validatePhoneNumber(formData.phoneNumber)) {
                alert('请输入正确的电话号码格式');
                return;
            }

            // 提交表单数据
            submitConsultation(formData);
        });

        // 表单验证函数
        function validateForm(data) {
            const requiredFields = [
                { field: 'personName', name: '人员姓名' },
                { field: 'phoneNumber', name: '联系电话' },
                { field: 'consultationType', name: '咨询类别' },
                { field: 'businessCategory', name: '业务分类' },
                { field: 'consultationContent', name: '咨询内容' }
            ];

            for (let item of requiredFields) {
                if (!data[item.field]) {
                    alert(`请填写${item.name}`);
                    document.getElementById(item.field).focus();
                    return false;
                }
            }
            return true;
        }

     

        // 提交咨询数据
        function submitConsultation(data) {
            // 这里可以根据实际需求修改提交逻辑
            console.log('提交的咨询数据:', data);
            
            // 模拟提交成功
            alert('咨询信息提交成功！');
            
            // 可以在这里调用实际的API接口
            // fetch('/api/consultation', {
            //     method: 'POST',
            //     headers: {
            //         'Content-Type': 'application/json'
            //     },
            //     body: JSON.stringify(data)
            // }).then(response => {
            //     if (response.ok) {
            //         alert('咨询信息提交成功！');
            //         resetForm();
            //     } else {
            //         alert('提交失败，请重试');
            //     }
            // }).catch(error => {
            //     console.error('提交错误:', error);
            //     alert('网络错误，请重试');
            // });
            
            // 提交成功后重置表单
            resetForm();
        }

        // 取消操作
        function cancelForm() {
            if (confirm('确定要取消吗？未保存的数据将丢失。')) {
                resetForm();
                closeConsultationModal();
            }
        }

        // 重置表单
        function resetForm() {
            document.getElementById('consultationForm').reset();
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 可以在这里添加页面初始化逻辑
            console.log('新建咨询页面加载完成');
        });
    </script>
</body>
</html>